<template>
  <div class="history-list" v-if="visible">
    <header class="header">
      <span class="title">批改记录</span>
      <img
        class="hover"
        src="@/assets/images/single-correct/close.png"
        @click="visible = false"
      />
    </header>
    <!-- 批改状态筛选 -->
    <el-select
      v-model="searchFilter.correctStatus"
      placeholder="Select"
      size="large"
    >
      <el-option
        v-for="(item, index) in statusOptions"
        :key="index"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <!-- 普通打分筛选 -->
    <div class="filter flex-between" v-if="correctType == CORRECT_TYPE.ROUGH">
      <el-checkbox
        v-model:checked="searchFilter.correctNormal.isOpen"
        @change="onChangeNormal"
      >
        普通筛选
      </el-checkbox>
      <div class="status flex">
        <button
          class="status-item"
          :class="[
            item.value == searchFilter.correctNormal.status
              ? 'status-item-active'
              : ''
          ]"
          :disabled="!searchFilter.correctNormal.isOpen"
          v-for="item in normalStatus"
          :key="item.value"
          @click="searchFilter.correctNormal.status = item.value"
        >
          {{ item.label }}
        </button>
      </div>
    </div>
    <!-- 分数打分筛选 -->
    <div class="filter flex-between" v-if="correctType == CORRECT_TYPE.SCORE">
      <el-checkbox
        v-model:checked="searchFilter.correctScore.isOpen"
        @change="onChangeScore"
      >
        分数筛选
      </el-checkbox>
      <div class="score-box flex">
        <el-input-number
          :controls="false"
          v-model="searchFilter.correctScore.min"
          :min="0"
          :max="questionInfo?.set_total_score || 0"
          :disabled="!searchFilter.correctScore.isOpen"
        />
        -
        <el-input-number
          :controls="false"
          v-model="searchFilter.correctScore.max"
          :min="0"
          :max="questionInfo?.set_total_score || 0"
          :disabled="!searchFilter.correctScore.isOpen"
        />
      </div>
    </div>
    <!-- 批改时间筛选 -->
    <div class="filter flex-between">
      <el-checkbox
        v-model:checked="searchFilter.correctTime.isOpen"
        @change="value => (searchFilter.correctTime.isOpen = value)"
      >
        批改时间
      </el-checkbox>
      <div class="score-box flex">
        <el-date-picker
          :disabled="!searchFilter.correctTime.isOpen"
          v-model="searchFilter.correctTime.time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          width="100px"
        />
      </div>
    </div>
    <div class="table-container">
      <div class="table-header">
        <div class="table-item">编号</div>
        <div class="table-item score">成绩</div>
        <div class="table-item marking-time">
          <span class="time">批改时间</span>
        </div>
      </div>
      <template v-if="recordList.length">
        <div
          class="table-list"
          v-for="(item, index) of recordList"
          :style="{
            backgroundColor:
              item.student_id === currentAnswer?.student_id ? '#f7f9fd' : '#fff'
          }"
          :key="item.student_id"
          @click="onChangeStudentAnswer(item.student_id)"
        >
          <div class="table-item">{{ getQtsOrder(index) }}</div>
          <div class="table-item score">
            {{
              item.correct_time
                ? correctType == CORRECT_TYPE.ROUGH
                  ? TEACHER_CORRECT_TEXT[item.teacher_correct]
                  : item.score
                : '--'
            }}
          </div>
          <div class="table-item">
            {{
              item.correct_time
                ? dayjs(item.correct_time).format('MM-DD HH:mm')
                : '--'
            }}
          </div>
        </div>
      </template>
      <div class="blank-tip" v-if="recordList.length === 0">
        <i></i>
        <p>暂无记录</p>
      </div>
    </div>
    <div class="flex-center">
      <el-pagination
        :disabled="!pageInfo.total"
        layout="prev, pager, next"
        :total="pageInfo.total"
        v-model:current-page="pageInfo.pageIndex"
        :page-size="pageInfo.pageSize"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
import { correctRecordList } from '@/apis/single-correct/index'
import { CORRECT_TYPE, TEACHER_CORRECT_TEXT } from '../data'
import dayjs from 'dayjs'
import { singleCorrectMitt } from '@/utils/tools/bus'

const props = defineProps({
  taskInfo: {
    required: true
  },
  questionInfo: {
    required: true
  },
  currentAnswer: {
    required: true
  }
})
const visible = defineModel('visible')
const statusOptions = [
  { label: '全部', value: 3 },
  { label: '已批', value: 1 },
  { label: '未批', value: 2 }
]
const normalStatus = [
  { label: '全对', value: 1 },
  { label: '全半对', value: 2 },
  { label: '全错', value: 3 }
]
const searchFilter = ref({
  correctStatus: 1, // 批改状态
  correctNormal: {
    isOpen: false,
    status: 0
  },
  correctScore: {
    isOpen: false,
    min: 0,
    max: 0
  },
  correctTime: {
    isOpen: false,
    time: [null, null]
  }
})
const correctType = computed(() => props.taskInfo?.correctType) // 作业批改模式

const recordList = ref([])
const pageInfo = ref({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

const onChangeNormal = value => {
  searchFilter.value.correctNormal.isOpen = value
  if (!value) {
    searchFilter.value.correctNormal.status = null
  }
}

const onChangeScore = value => {
  searchFilter.value.correctScore.isOpen = value
  if (!value) {
    searchFilter.value.correctScore.min = 0
    searchFilter.value.correctScore.max = props.questionInfo.set_total_score
  }
}
const getQtsOrder = index => {
  return (
    pageInfo.value.total -
    (pageInfo.value.pageIndex - 1) * pageInfo.value.pageSize -
    index
  )
}

const onChangeStudentAnswer = id => {
  singleCorrectMitt.emit('change-student-answer', { id })
}
// 获取历史批改记录
const getHistoryList = async () => {
  const param = {
    task_id: props.taskInfo.taskId,
    question_id: props.questionInfo.question_id,
    class_id: props.taskInfo.classId,
    item_type: props.questionInfo.itemType,
    page: pageInfo.value.pageIndex,
    page_size: pageInfo.value.pageSize,
    grade_status: searchFilter.value.correctStatus
  }
  if (searchFilter.value.correctTime.isOpen) {
    param.grade_time_start = dayjs(
      searchFilter.value.correctTime.time[0]
    ).format('YYYY-MM-DD HH:mm:ss')
    param.grade_time_end = dayjs(searchFilter.value.correctTime.time[1])
      .endOf('day')
      .format('YYYY-MM-DD HH:mm:ss')
  }
  if (
    correctType.value == CORRECT_TYPE.ROUGH &&
    searchFilter.value.correctNormal.isOpen
  ) {
    param.score = searchFilter.value.correctNormal.status
  }
  if (
    correctType.value == CORRECT_TYPE.SCORE &&
    searchFilter.value.correctScore.isOpen
  ) {
    param.filter_score_min = searchFilter.value.correctScore.min
    param.filter_score_max = searchFilter.value.correctScore.max
  }
  const res = await correctRecordList(param)
  recordList.value = res.data.list || []
  pageInfo.value.total = res.data.total
}

watchEffect(() => {
  getHistoryList()
})
</script>

<style scoped lang="less">
.history-list {
  position: fixed;
  background-color: #fff;
  width: 350px;
  right: 40px;
  top: 70px;
  z-index: 2;
  padding: 20px;
  border-radius: 10px;
  min-height: 40vh;
  max-height: 85vh;
  color: #000;

  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);

  .header {
    box-sizing: border-box;
    width: 100%;
    padding: 17px 22px 27px;
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0px;
      color: #181818;
    }
    .close-img {
      display: inline-block;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
  .filter {
    margin-top: 20px;
    .status {
      //   width: 100%;
      gap: 12px;
      .status-item {
        height: 34px;
        line-height: 32px;
        padding: 0 9px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        font-size: 14px;
        cursor: pointer;
        color: #000;
        &:hover {
          border: 1px solid #409eff;
        }
      }
      .status-item-active {
        border: 1px solid #409eff;
        background: #e7f3ff;
      }
      .disable-filter-score {
        background: rgb(245, 245, 245);
        cursor: not-allowed;
        &:hover {
          border: 1px solid #dcdfe6;
        }
      }
    }
    .score-box {
      gap: 10px;
      color: #000;
      :deep(.el-input-number) {
        width: 80px;
      }
      :deep(.el-date-editor) {
        width: 200px;
      }
    }
  }
}
.table-container {
  width: 340px;
  min-height: 200px;
  max-height: 600px;
  margin: 14px auto 10px;
  border: solid 1px #f5f5f5;
  flex: 1;
  overflow-y: scroll;
  .table-header,
  .table-list {
    height: 28px;
    display: flex;
    .table-item {
      flex: 1;
      font-size: 16px;
      color: #646464;
      border: solid 1px #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .marking-time {
      cursor: pointer;
    }
    .score {
      flex: 0.6;
    }
    .time {
      padding-right: 5px;
    }
  }

  .table-header {
    .table-item {
      color: #181818;
    }
  }

  .table-list {
    position: relative;
    cursor: pointer;

    &:hover {
      background-color: #f7f9fd !important;
    }
  }
  .blank-tip {
    text-align: center;
    padding: 20px 0;
    i {
      display: block;
      width: calc(316px / 1.7);
      height: calc(290px / 1.7);
      margin: 0 auto;
      background: url('@/assets/images/single-correct/blank-tip.png') center
        no-repeat;
      background-size: contain;
    }
    p {
      line-height: 40px;
    }
  }
}
</style>
